<template>
	<view class="loader-4">
	</view>
</template>
<script>
	export default {}
</script>
<style scoped lang="scss">
	@-webkit-keyframes rotation {
	    0% {
	      transform: rotate(0deg);
	    }
	    100% {
	      transform: rotate(360deg);
	    }
	  }
	.loader-4 {
		width: 48rpx;
		height: 48rpx;
		border: 2rpx solid #2a9aff;
		border-radius: 50%;
		display: inline-block;
		position: relative;
		-webkit-animation: rotation 1s linear infinite;
		animation: rotation 1s linear infinite;
	}

	.loader-4:before {
		left: auto;
		top: auto;
		right: 0;
		bottom: 0;
		content: "";
		position: absolute;
		background: #2a9aff;
		width: 6rpx;
		height: 6rpx;
		transform: translate(-150%, -150%);
		border-radius: 50%;
	}

	.loader-4:after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		background: #2cd2ff;
		width: 6rpx;
		height: 6rpx;
		transform: translate(150%, 150%);
		border-radius: 50%;
	}
</style>
